<template>
  <div class="receipt-confirm">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>回单管理</el-breadcrumb-item>
        <el-breadcrumb-item>回单确认</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 查询条件 -->
    <el-card class="search-card">
      <div class="search-title">查询条件</div>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="派车单号：">
          <el-input v-model="searchForm.dispatchNo" placeholder="请输入派车单号"></el-input>
        </el-form-item>
        <el-form-item label="客户订单号：">
          <el-input v-model="searchForm.customerOrderNo" placeholder="请输入客户订单号"></el-input>
        </el-form-item>
        <el-form-item label="车辆：">
          <el-input v-model="searchForm.plateNo" placeholder="请输入车牌号"></el-input>
        </el-form-item>
        <el-form-item label="司机：">
          <el-input v-model="searchForm.driver" placeholder="请输入司机姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查 询</el-button>
          <el-button @click="handleReset">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 未处理派车单列表 -->
    <el-card class="table-card">
      <div class="section-title">未处理派车单列表</div>
      <div class="table-operations">
        <el-checkbox v-model="submitAll">提交</el-checkbox>
      </div>

      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="dispatchNo" label="派车单号"></el-table-column>
        <el-table-column prop="route" label="路线"></el-table-column>
        <el-table-column prop="dispatchTime" label="指派时间"></el-table-column>
        <el-table-column prop="vehicleType" label="车辆类型"></el-table-column>
        <el-table-column prop="carrier" label="承运商"></el-table-column>
        <el-table-column prop="plateNo" label="车辆"></el-table-column>
        <el-table-column prop="driver" label="司机"></el-table-column>
        <el-table-column prop="receiptTime" label="回单时间"></el-table-column>
        <el-table-column prop="uploadedReceipts" label="已上传回单数"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleManage(scope.row)">管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加回单管理弹窗 -->
    <el-dialog title="回单管理" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false">
      <div class="receipt-manage">
        <!-- 派车单信息 -->
        <div class="dispatch-info">
          <div class="section-title">派车单信息</div>
          <el-table :data="[currentRow]" border style="width: 100%">
            <el-table-column prop="dispatchNo" label="派车单号"></el-table-column>
            <el-table-column prop="customerOrderNo" label="客户订单号"></el-table-column>
            <el-table-column prop="route" label="路线"></el-table-column>
            <el-table-column prop="dispatchTime" label="指派时间"></el-table-column>
            <el-table-column prop="vehicleType" label="车辆类型"></el-table-column>
            <el-table-column prop="carrier" label="承运商"></el-table-column>
            <el-table-column prop="plateNo" label="车辆"></el-table-column>
            <el-table-column prop="driver" label="司机"></el-table-column>
            <el-table-column prop="receiptTime" label="回单时间"></el-table-column>
          </el-table>
        </div>

        <!-- 回单信息 -->
        <div class="receipt-info">
          <div class="section-title">回单信息</div>
          <el-form :model="receiptForm" label-width="100px">
            <el-form-item label="回收日期">
              <el-date-picker v-model="receiptForm.receiptDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="回收说明">
              <el-input type="textarea" v-model="receiptForm.description" :rows="3"></el-input>
            </el-form-item>
            <el-form-item label="回单数量" class="receipt-count">
              <span>5 张</span>
            </el-form-item>
          </el-form>
        </div>

        <!-- 回单图片 -->
        <div class="receipt-images">
          <div class="section-title">回单图片</div>
          <div class="image-list">
            <div class="image-item" v-for="(image, index) in receiptImages" :key="index">
              <img :src="image.url" alt="回单图片">
              <div class="image-actions">
                <i class="el-icon-delete" title="删除"></i>
                <i class="el-icon-zoom-in" title="查看"></i>
              </div>
            </div>
            <div class="upload-box">
              <span>选择图片上传</span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button type="success" @click="handleConfirm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ReceiptConfirm',
  data() {
    return {
      searchForm: {
        dispatchNo: '',
        customerOrderNo: '',
        plateNo: '',
        driver: ''
      },
      submitAll: false,
      tableData: [{
        dispatchNo: '2018781',
        route: '上海-杭州-北京',
        dispatchTime: '2015-07-30 20:24:10',
        vehicleType: '10吨平板',
        carrier: '上海佳吉物流',
        plateNo: '沪A 389899',
        driver: '张春雨, 王大勇',
        receiptTime: '2015-07-30 20:24:10',
        uploadedReceipts: 6
      },
      {
        dispatchNo: '2018781',
        route: '上海-杭州-北京',
        dispatchTime: '2015-07-30 20:24:10',
        vehicleType: '10吨平板',
        carrier: '上海佳吉物流',
        plateNo: '沪A 389899',
        driver: '张春雨, 王大勇',
        receiptTime: '2015-07-30 20:24:10',
        uploadedReceipts: 2
      },
      {
        dispatchNo: '2018781',
        route: '上海-北京',
        dispatchTime: '2015-07-30 20:24:10',
        vehicleType: '10吨平板',
        carrier: '上海佳吉物流',
        plateNo: '沪A 389899',
        driver: '张春雨, 王大勇',
        receiptTime: '',
        uploadedReceipts: ''
      },
      {
        dispatchNo: '2018781',
        route: '上海-北京',
        dispatchTime: '2015-07-30 20:24:10',
        vehicleType: '5吨厢式',
        carrier: '上海佳吉物流',
        plateNo: '沪A 389899',
        driver: '张春雨, 王大勇',
        receiptTime: '',
        uploadedReceipts: ''
      }],
      dialogVisible: false,
      currentRow: {},
      receiptForm: {
        receiptDate: '2016-06-18',
        description: '',
      },
      receiptImages: [
        { url: 'path/to/image1.jpg' },
        { url: 'path/to/image2.jpg' }
      ]
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索条件：', this.searchForm)
    },
    handleReset() {
      this.searchForm = {
        dispatchNo: '',
        customerOrderNo: '',
        plateNo: '',
        driver: ''
      }
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },
    handleManage(row) {
      this.currentRow = row
      this.dialogVisible = true
    },
    handleDeleteImage(index) {
      this.receiptImages.splice(index, 1)
    },
    handlePreviewImage(image) {
      // 实现图片预览
    },
    handleSave() {
      this.$message.success('保存成功')
      this.dialogVisible = false
    },
    handleConfirm() {
      this.$message.success('确认成功')
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.receipt-confirm {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.section-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.table-operations {
  margin-bottom: 20px;
}

.receipt-manage {
  padding: 20px;
}

.dispatch-info {
  margin-bottom: 20px;
}

.receipt-info {
  margin-bottom: 20px;
}

.receipt-images {
  margin-bottom: 20px;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.image-item {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #dcdfe6;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 5px;
}

.image-actions i {
  cursor: pointer;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 50%;
}

.upload-box {
  width: 200px;
  height: 200px;
  border: 1px dashed #dcdfe6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.upload-box i {
  font-size: 28px;
  color: #8c939d;
  margin-bottom: 10px;
}

.upload-box span {
  color: #8c939d;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 0;
  margin-bottom: 10px;
}
</style> 